<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<!--ios是否运行创建快捷启动方式-->
		<meta content="yes" name="apple-mobile-web-app-capable">
		<!--ios顶部通知栏的样式 黑色-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<!--遇到数字不让转成电话号码格式-->
		<meta content="telephone=no" name="format-detection">
		<script src="js/remstyle.js"></script>
		<link rel="stylesheet" href="assets/mui/css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="common/css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/min_page.css" />
		<link rel="stylesheet" type="text/css" href="css/sameInfo.css" />
		<script type="text/javascript" src="js/vue.js"></script>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script type="application/javascript " src="js/jquery-1.7.2.min.js "></script>
		<script src="layer/layer.js"></script>
		<link rel="stylesheet" type="text/css" href="layer/skin/layer.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css" />
		<script src="js/config.js"></script>
		<title>商品选择</title>
	</head>
	<style>
		.shop_con {
			width: 100%;
			background: #fff;
			overflow: auto;
		}
		
		.shop_list {
			width: 100%;
			/*border: 1px solid red;*/
		}
		
		.choose_shop {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: space-around;
			padding: 0.15rem 0.05rem;
			box-sizing: border-box;
			border-bottom: 1px solid #e7e7e7;
			/*background: pink;*/
		}
		
		.shop_img {
			width: 30%;
			margin-right: 2%;
			height: 2rem;
			overflow:hidden;
			/*border: 1px solid black;*/
		}
		
		.shop_img img {
			width: 100%;
			height: auto;
		}
		
		.shop_info {
			width: 59%;
			height: 1.7rem;
			/*	border: 1px solid black;*/
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		
		input[type="radio"] {
			-webkit-appearance: none;
			/*清除复选框默认样式*/
			height: 22px;
			/*高度*/
			vertical-align: middle;
			width: 22px;
			border: 1px solid #a7a7a7;
			border-radius: 50%;
			margin-right: 0.1rem;
		}
		
		input[type="radio"]:checked {
			/*复选框的背景图，就是上图*/
			border: none;
			background: #e44e50 url(img_page/duigou.png) no-repeat center center;
			background-size: 60%;
		}
		
		.shop_info_name {
			/*margin-bottom: 0.7rem;*/
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
		
		.shop_info_price {
			color: red;
		}
		/*.shop_rank {
			width: 100%;
			height: 1rem;
			background: #fff;
			border-bottom: 1px solid #f6f6f6;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			font-size: 0.3rem;
		}
		
		.shop_rank_list {
			width: 20%;
			height: 1rem;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		}
		
		.rank_img {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: flex-start;
			margin-left: 0.1rem;
		}
		
		.rank_img > span {
			margin: 0 !important;
			padding: 0 !important;
			display: inline-block;

			text-align: center;
			line-height: 0.05rem;
			
		}*/
		
		.ld_order {
			width: 100%;
			background: white;
			height: 1rem;
			border-bottom: 1px solid #eee;
		}
		
		.ld_order a {
			width: 50%;
			float: left;
			height: 1rem;
			color: #333;
			text-align: center;
			line-height: 1rem;
			font-size: 0.28rem;
			color: #242424;
		}
		
		.ld_order a.now {
			color: #CF2D28;
		}
		
		.shop_bottom {
			width: 100%;
			height: 1rem;
			position: fixed;
			bottom: 0;
			left: 0;
			line-height: 1rem;
			text-align: center;
			border: none;
			border-top: 1px solid #e1e1e1;
			background: #fff;
		}
		.new_shop{
			width: 100%;
			display: none;
		}
		.new_shop_con{
			width: 80%;
			height:auto;
			border: 1px solid red;
			display: flex;
			/*align-items:center ;*/
			flex-direction: column;
			
		}
		.new_shop_img{
			width: 100%;
			height: auto;
			/*max-height: 3rem;*/
		}
		.buy_now{
			width: 100%;
			height: 0.8rem;
			background:#CF2D28;
			text-align: center;
			line-height: 0.8rem;
			border-radius: 3px;
			color: #fff;
			font-size: 0.3rem ;
			
		}
		.productId{
			opacity: 0;
		}
	</style>

	<body>
		<!--顶部-->
		<div class="top">
			<div class="top-one" onclick="javascript :history.back(-1);">
				<span><img src="img_page/right.png"/></span>
			</div>
			<div class="point">
				<img src="img_page/3point.png" />
			</div>
		</div>
		<!--排序部分-->
		<div class="ld_order">
			<a id="time-collection" href="javascript:; " data-order="time">时间 <span class="fa fa-angle-down"></span></ a>
				<a id="price-collection" href="javascript:;" data-order="price">价格 <span class="fa fa-angle-down"></span></ a>
		</div>

		<!--内容-->
		<div class="shop_con" >
			<div class="shop_list" v-for="(v,index) in shop_list" >
				<label class="choose_shop">
					<div class="shop_img">
						<img :src="v.goodsImg" />
					</div>
					<div class="shop_info">
						<span class="shop_info_name">{{v.goodsName}}</span>
						<span class="shop_info_price">￥{{v.goodsPrice}}</span>
					</div>
					<!--新样式-->
					<div class="new_shop">
						<div class="new_shop_con">
							<img class="new_shop_img" :src="v.goodsDatailsimg[0]"/>
							<span class="shop_info_name">{{v.goodsName}}</span>
							<span class="shop_info_price">￥{{v.goodsPrice}} <span>{{v.goodsId}}</span></span>
							<span class="buy_now">立即购买</span>
						</div>
						
					</div>
					<input type="radio" name="choose_one" :value="index" />	
				</label>

			</div>

		<div class="advv"></div>
		</div>
		<!--底部-->
		<button class="shop_bottom" onclick="sure_choose()">
			确认导入
		</button>
	</body>
	<script>
		var aaaa = window.location.href;
		var bbbb = aaaa.substring(aaaa.indexOf('addToTo=') + 8,aaaa.length);
		$(function() {
			
			$('.ld_order a').on('click', function() {
				var $this = $(this);
				var id=$this.prop("id");
				//alert(text);
				var sort=1;
				if(!$this.hasClass('now')) {
					$this.addClass('now').siblings().removeClass('now')
						.find('span').removeClass('fa-angle-up').addClass('fa-angle-down');
						console.log(id);
						if(id=='time-collection'){
							sort=1;
						}else{
							sort=3;
						}
				} else {
					if($this.find('span').hasClass('fa-angle-down')) {
						$this.find('span').removeClass('fa-angle-down').addClass('fa-angle-up');
						if(id=='time-collection'){
							sort=0;
						}else{
							sort=2;
						}
					} else {
						$this.find('span').removeClass('fa-angle-up').addClass('fa-angle-down');
						if(id=='time-collection'){
							sort=1;
						}else{
							sort=3;
						}
					}
				}
				new_shop_list.sort=sort;
				new_shop_list.pages=1;
				new_shop_list.shop_list=[];
				new_shop_list.getList()
			});
		})

		var new_shop_list = new Vue({
			el: '.shop_con',
			data: {
				shop_list: [],
				pages: 1,
				sort:100
			},
			created() {
				this.getList();
				window.addEventListener('scroll', this.onScroll);
			},
			methods: {
				onScroll() { //可滚动容器的高度
					var that = this;

					let innerHeight = document.querySelector('.shop_con').clientHeight; //屏幕尺寸高度
					let outerHeight = document.documentElement.clientHeight; //可滚动容器超出当前窗口显示范围的高度
					var scrollTop;
					if(typeof window.pageYOffset != 'undefined') { //pageYOffset指的是滚动条顶部到网页顶部的距离
						scrollTop = window.pageYOffset;
					} else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
						scrollTop = document.documentElement.scrollTop;
					} else if(typeof document.body != 'undefined') {
						scrollTop = document.body.scrollTop;
					}
					//console.log(innerHeight + " " + outerHeight + " " + scrollTop);
					if(innerHeight < (outerHeight + scrollTop)) { //加载更多操作
						console.log("加载中");
						//this.items += 10;

						that.pages = ++that.pages
						that.getList()
							//layer.closeAll();
					}
				},
				getList() {
					layer.load("加载中");
					var that = this;
					console.log(that.pages);
					$.ajax({
						type: "get",
						url: v_url +"/wechat/singlepage/getGoods",
						data: {
							userUuid: c_user_id,
							pages: that.pages,
							rows: '10',
							sort: that.sort,
						},
						async: false,
						success: function(res) {
							var list = res.data;
							layer.closeAll();
							if(list && list.length != 0) {

								var new_shop_list = that.shop_list;
								for(var i = 0; i < list.length; i++) {
									new_shop_list.push(list[i]);
								}
								that.shop_list = new_shop_list
								console.log(new_shop_list);
								console.log(that.shop_list,888888)
								if(list.length < 10) {
									
								}
							}

						}
					});

				}
				

			}
		})
		
		function sure_choose(){					
					console.log(v_param)
					var index=$('input:radio[name="choose_one"]:checked').val();
					var shop_list=new_shop_list.shop_list;
					var good=shop_list[index]
					var html='<div class="new_shop_con">'
							+'<img class="new_shop_img"   src="'+good.goodsImg+'"/>'
							+'<span class="shop_info_name">'+good.goodsName+'</span>'
							+'<span class="shop_info_price">￥'+good.goodsPrice+'</span>'
							+'<span class="buy_now">立即购买</span>'
							+'<span class="productId" style="opacity: 0;">'+good.goodsId+'</span>'
						+'</div>';
						
						console.log(html);
					//var html="<div class='new_shop_con'>"+$(obj.currentTarget).html()+"</div>"
					if(v_param) {
							$.ajax({
								type: "get",
								url:v_url+"/wechat/singlepage/saveContent",
								data: {
									id: v_param,
									content: html,
									c_user_id:c_user_id								
								},
								async: false,
								success: function(res) {
									if(res.code == 200) {
										console.log("保存成功")
									window.location = bbbb;
										
									} else {
										console.log("保存失败")
									}
								}
							});
						}
				}

	</script>

</html>